<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局</title>

    <style>
        .conatiner {
            width: 800px;
            height: 700px;
            margin: 0 auto;
            background-color: antiquewhite;
            /* 设置为弹性布局 */
            display: flex;
            /* flex-direction 修改主轴的方向 row row-reverse column column-reverse */
            /* flex-direction: column; */
            /* flex-wrap 定义如果元素定宽或者定高，一行放不下如何换行  nowrap 不换行 wrap 第一行在上面 wrap-reverse 第一行在最下面 */
            /* flex-wrap: wrap-reverse; */
            /* flex-flow: 将flex-direction和flex-wrap写到一起 row nowrap */
            /* flex-flow: column nowrap; */
            /* justify-content 设置项目在主轴方向的对齐方式 */
            /* center 居中对齐 */
            /* flex-start 居主轴start对齐 */
            /* flex-end 居主轴end对齐 */
            /* space-between 居主轴的start和end对齐 把剩余的拿出来平分 */
            /* space-around 项目左右两边的距离都相等 */
            /* space-evenly 平分主轴的剩余部分 */
            /* align-content 设置项目在交叉轴方向的对齐方式 */
            /* center 居中对齐 */
            /* flex-start 居交叉轴start对齐 */
            /* flex-end 居交叉轴end对齐 */
            /* space-between 居交叉轴的start和end对齐 把剩余的拿出来平分 */
            /* space-around 项目上下两边的距离都相等 */
            /* space-evenly 平分交叉轴的剩余部分 */
            justify-content: space-between;
            flex-wrap: wrap;
            /* align-items 设置内容在交叉轴的如何分配空间 */
            /* baseline 每一个项目的第一行文字基线对齐 */
            /* center 和交叉轴的中线对齐 */
            /* flex-start 和交叉轴的start对齐 */
            /* flex-end 和交叉轴的end对齐 */
            /* stretch 会拉伸项目到felx容器的大小 */
            /* align-items: baseline; */


        }

        .article {
            width: 200px;
            /* height: 300px; */
            border: 2px solid;
        }
    </style>
</head>

<body>
    <div class="conatiner">
        <div class="article">
            1爱情可以有许多不同的形式，包括亲情、友情和恋爱。
            亲情是一种深厚的家庭情感，它将家庭成员紧密联系在一起，使他们在困难时刻相互支持。友情则是一种互相信任和理解的关系，朋友之间分享欢笑和泪水，共同度过人生中的各种时刻。
        </div>
        <div class="article">
            2爱情是一种无法用言语完全描述的强烈情感，它贯穿着人类历史的各个时期和文化。爱情是一种令人陶醉的感觉，让人感到幸福、满足和充实。
        </div>

        <div class="article">
            3而恋爱则是最令人心跳加速的一种爱情形式。恋爱让人陷入热烈的感情，愿意为对方付出一切。它包括激情、浪漫和亲密，让人感到生活充满了美好的可能性。然而，恋爱也可以是复杂和充满挑战的，因为它需要双方之间的理解、信任和妥协。
        </div>
        <div class="article">
            4无论是亲情、友情还是恋爱，爱情都是我们生活中不可或缺的一部分。它赋予我们力量，使我们感到有价值和被珍视。爱情不仅仅是一种感觉，它还是一种行动，需要我们不断努力去维系和培养
        </div>
        <div class="article">
            5总之，爱情是世界上最美好的情感之一，它让我们的生活变得更加丰富多彩，值得我们用心去呵护和珍惜。无论是与家人、朋友还是伴侣，爱情都是连接我们与世界的纽带，赋予生命以意义和价值。
        </div>
        <div class="article">
            5总之，爱情是世界上最美好的情感之一，它让我们的生活变得更加丰富多彩，值得我们用心去呵护和珍惜。无论是与家人、朋友还是伴侣，爱情都是连接我们与世界的纽带，赋予生命以意义和价值。
        </div>
        <div class="article">
            5总之，爱情是世界上最美好的情感之一，它让我们的生活变得更加丰富多彩，值得我们用心去呵护和珍惜。无论是与家人、朋友还是伴侣，爱情都是连接我们与世界的纽带，赋予生命以意义和价值。
        </div>
    </div>
</body>

</html>